<script lang="ts" setup>
import { ref } from 'vue'
import jdfkService from '@/api/jdfk'
import wjfwService from '@/api/wjfw'
import { ElMessage } from 'element-plus'
import { Jdjl } from '@/api/jdfk-dto'
import jdbDialog from '@/views/gdjd/gdyj/dialogs/jdb-dialog.vue'
/*
 * 打开弹窗
 */
const dialogVisible = ref(false)
const currentRow = ref<any>({})
const openDialog = (row: any) => {
  dialogVisible.value = true
  currentRow.value = row
  getCldmx(row.jdbh)
}

const cldList = ref<Jdjl[]>([])
const getCldmx = (jdbh: string) => {
  const params = { jdbh }
  jdfkService
    .getCldmx(params)
    .then((res) => {
      cldList.value = res.data?.jdjlList || []
    })
    .catch((err) => {
      !err.isError && ElMessage({ type: 'warning', message: err.message })
    })
}

// 监督全景记录里带文件序号的，就打开相应文件
const jdbDialogRef = ref()
const openJdWj = (wjbh: string, title: string) => {
  const params = { wjbh }
  wjfwService.downloadBlob(params).then((res) => {
    if (res.type === 'application/json') {
      const reader = new FileReader()
      reader.onload = () => {
        const jsonData =
          typeof reader.result === 'string' ? JSON.parse(reader.result) : reader.result
        ElMessage({ type: 'warning', message: jsonData.message })
      }
      reader.readAsText(res)
    } else {
      const url = window.URL.createObjectURL(res)
      jdbDialogRef.value?.openDialog(url, title, null, true)
    }
  })
}
const closeDialog = () => {
  currentRow.value = {}
}

const computedRowspan = (list: any[]) => {
  let count = 1
  list.forEach((el) => {
    if (el.zgfklx === 'gd0670001') {
      count += 1
    } else if (el.zgfklx === 'gd0670002') {
      count += 2
    }
  })
  return count
}
defineExpose({ openDialog })
</script>
<template>
  <el-dialog
    v-model="dialogVisible"
    title="归档监督处理单"
    width="1000px"
    :close-on-click-modal="false"
    @close="closeDialog"
  >
    <div class="cld-box">
      <el-descriptions class="desc" title="问题简述" :column="2" border>
        <el-descriptions-item label="部门受案号" align="center" :span="2" rowspan="2">
          {{ currentRow.bmsah }}
        </el-descriptions-item>
        <el-descriptions-item label="统一受案号" align="center" :span="2" rowspan="0">
          {{ currentRow.tysah }}
        </el-descriptions-item>
        <el-descriptions-item label="案件名称" align="center" :span="2">
          {{ currentRow.ajmc }}
        </el-descriptions-item>
        <el-descriptions-item label="问题分类" align="center" :span="2">
          {{ currentRow.wtflmc }}
        </el-descriptions-item>
        <el-descriptions-item label="问题描述" align="center" :span="2">
          {{ currentRow.wtms }}
        </el-descriptions-item>
        <el-descriptions-item label="创建监督日期" align="center">
          {{ currentRow.wtfxsj }}
        </el-descriptions-item>
        <el-descriptions-item label="当前监督方式" align="center">
          {{ currentRow.jdfsmc }}
        </el-descriptions-item>
        <el-descriptions-item label="监督状态" align="center">
          {{ currentRow.jdztmc }}
        </el-descriptions-item>
        <el-descriptions-item label="结束监督日期" align="center">
          {{ currentRow.jsrq }}
        </el-descriptions-item>
        <el-descriptions-item label="结束原因" align="center">
          {{ currentRow.jsyy }}
        </el-descriptions-item>
      </el-descriptions>
      <div class="desc jdqj">
        <div class="el-descriptions__header">监督全景</div>
        <table class="jdqj-table" cellpadding="0" cellspacing="0" style="width: 100%">
          <thead class="is-group" v-for="mx in cldList" :key="mx.jdlx">
            <tr>
              <th
                class="table__cell jdqj-label"
                colspan="1"
                :rowspan="computedRowspan(mx.zgfkjlList)"
              >
                <div class="cell">{{ mx.jdlx }}</div>
              </th>
              <th class="table__cell" colspan="1" rowspan="1">
                <div class="cell">发起监督日期</div>
              </th>
              <th class="table__cell" colspan="1" rowspan="1">
                <div class="cell">{{ mx.jdfqrq }}</div>
              </th>
              <th class="table__cell" colspan="1" rowspan="1">
                <div class="cell">监督员</div>
              </th>
              <th class="table__cell" colspan="1" rowspan="1">
                <div class="cell">{{ mx.jdfqrxm }}</div>
              </th>
              <th class="table__cell" colspan="1" rowspan="1">
                <div class="cell">处理意见</div>
              </th>
              <th class="table__cell" colspan="1" rowspan="1">
                <div class="cell">
                  <el-link
                    v-if="mx.jdtzswjxh"
                    type="primary"
                    :underline="false"
                    @click="openJdWj(mx.jdtzswjxh, mx.jdclyj)"
                    >{{ mx.jdclyj }}</el-link
                  >
                  <span v-else>{{ mx.jdclyj }}</span>
                </div>
              </th>
            </tr>
            <template v-for="fk in mx.zgfkjlList" :key="fk.zgfklx">
              <tr v-if="fk.zgfklx === 'gd0670001'">
                <th class="table__cell" colspan="1" rowspan="1">
                  <div class="cell">整改回复日期</div>
                </th>
                <th class="table__cell" colspan="1" rowspan="1">
                  <div class="cell">{{ fk.fkrq }}</div>
                </th>
                <th class="table__cell" colspan="1" rowspan="1">
                  <div class="cell">整改人</div>
                </th>
                <th class="table__cell" colspan="1" rowspan="1">
                  <div class="cell">{{ fk.fkrxm }}</div>
                </th>
                <th class="table__cell" colspan="1" rowspan="1">
                  <div class="cell">反馈情况</div>
                </th>
                <th class="table__cell" colspan="1" rowspan="1">
                  <div class="cell">
                    <el-link
                      v-if="fk.fkyjwjbh"
                      type="primary"
                      :underline="false"
                      @click="openJdWj(fk.fkyjwjbh, fk.fkyj)"
                      >{{ fk.fkyj }}</el-link
                    >
                    <span v-else>{{ fk.fkyj }}</span>
                  </div>
                </th>
              </tr>
              <template v-else-if="fk.zgfklx === 'gd0670002'">
                <tr>
                  <th class="table__cell" colspan="1" rowspan="1">
                    <div class="cell">复核日期</div>
                  </th>
                  <th class="table__cell" colspan="1" rowspan="1">
                    <div class="cell">{{ fk.fhsqrq }}</div>
                  </th>
                  <th class="table__cell" colspan="1" rowspan="1">
                    <div class="cell">申请人</div>
                  </th>
                  <th class="table__cell" colspan="1" rowspan="1">
                    <div class="cell">{{ fk.fhsqr }}</div>
                  </th>
                  <th class="table__cell" colspan="1" rowspan="1">
                    <div class="cell">复核情况</div>
                  </th>
                  <th class="table__cell" colspan="1" rowspan="1">
                    <div class="cell">
                      <el-link
                        v-if="fk.fhsqswjxh"
                        type="primary"
                        :underline="false"
                        @click="openJdWj(fk.fhsqswjxh, fk.fhsqs)"
                        >{{ fk.fhsqs }}</el-link
                      >
                      <span v-else>{{ fk.fhsqs }}</span>
                    </div>
                  </th>
                </tr>
                <tr>
                  <th class="table__cell" colspan="1" rowspan="1">
                    <div class="cell">复核决定日期</div>
                  </th>
                  <th class="table__cell" colspan="1" rowspan="1">
                    <div class="cell">{{ fk.fhjdrq }}</div>
                  </th>
                  <th class="table__cell" colspan="1" rowspan="1">
                    <div class="cell">监督员</div>
                  </th>
                  <th class="table__cell" colspan="1" rowspan="1">
                    <div class="cell">{{ fk.fhjdrxm }}</div>
                  </th>
                  <th class="table__cell" colspan="1" rowspan="1">
                    <div class="cell">复核决定</div>
                  </th>
                  <th class="table__cell" colspan="1" rowspan="1">
                    <div class="cell">
                      <el-link
                        v-if="fk.fhjdswjxh"
                        type="primary"
                        :underline="false"
                        @click="openJdWj(fk.fhjdswjxh, fk.fhjds)"
                        >{{ fk.fhjds }}</el-link
                      >
                      <span v-else>{{ fk.fhjds }}</span>
                    </div>
                  </th>
                </tr>
              </template>
            </template>
          </thead>
        </table>
      </div>
      <jdb-dialog ref="jdbDialogRef"></jdb-dialog>
    </div>
  </el-dialog>
</template>
<style lang="scss" scoped>
.cld-box {
  .desc {
    :deep(.el-descriptions__header) {
      border: 1px solid #ebeef5;
      border-bottom: 0;
      background-color: #fafafa;
      margin: 0;
      padding: 12px 0;
      display: flex;
      justify-content: center;
    }
    :deep(.el-descriptions__label) {
      min-width: 110px;
    }
    &.jdqj {
      .el-descriptions__header {
        border-top: 0;
        font-size: 16px;
        font-weight: bold;
        color: #303133;
      }
      .jdqj-table {
        border: 1px solid #ebeef5;
        .table__cell {
          border: 1px solid #ebeef5;
          padding: 8px 11px;
          height: 40px;
          box-sizing: border-box;
          .cell {
            text-align: center;
            min-width: 100px;
          }
          &.jdqj-label {
            color: #606266;
            background: #f5f7fa;
            font-weight: bold;
            min-width: 100px;
          }
        }
      }
    }
  }
}
</style>
